<script>
  /**
   * 组合式API：
   *  setup函数是使用组合式API的入口函数
   *  注意：setup函数中没有this,且setup函数只会在组件初始化时执行一次
   */
import {ref} from 'vue'; // 利用ref来声明常量
 export default {

  setup() { // 入口

    // 声明常量，ref声明响应式变量,即值改变时能触发页面更新
    const count = ref(0);

    // 定义方法
    function add() {
      count.value++; // 引用ref声明的变量，访问值需要.value，因为通过ref声明的变量是一个响应式对象
      x++
    }

    // 需要将定义的函数名、变量返回，以暴露给模板
    return {
      count,
      add,
      x
    }
  }
 }

</script>

<template>
    <div>
      {{ count }}
      <br>
      {{ x }}
    </div>
    <button @click="add">点我+1</button>  
</template>

<style scoped>

</style>
